var ns, toast;
var app = new Vue({
    el: '#app',
    data: {
        menus: [],
        categoryid: 0,
        sortorders: [{
            title: '默认',
            index: 5,
            is_active: true
        }, {
            title: '最新',
            index: 1,
            is_active: false
        }, {
            title: '销量',
            index: 2,
            is_active: false
        }, {
            title: '价格',
            index: 3,
            is_active: false,
            sort_by_price: 1
        }],
        current_sortby: 5,
        keywords: ''
    },
    methods: {
        get_data: function() {
            var that = this;
            that.is_searching = true;
            that.can_scroll = false;
            var options = {};
            options.action = 'getsearchcategorylist';
            options.type = 'productcategory';
            ns.post(options, function(succeed, data, err) {
                if (succeed) {
                    that.menus = data.menus;
                    setTimeout(function() {
                        // that.do_scroll_left();
                    }, 2000);
                    that.reloadProductItems();
                } else if (err) {
                    api.toast({
                        msg: err,
                        duration: 2000,
                        location: 'bottom'
                    });
                }
            }, {
                toast: true
            });
        },
        do_scroll_left: function() {
            var that = this;
            var scroll_left = 0;
            var is_arrive = false;
            for (var i = 0; i < that.menus.length; i++) {
                var item = that.menus[i];
                item.is_active = false;
                if (item.id == that.categoryid) {
                    item.is_active = true;
                    document.getElementById('main_menus').scrollLeft = scroll_left;
                    is_arrive = true;
                    continue;
                }
                if (!is_arrive) {
                    var width = document.getElementById('label_' + item.id).offsetWidth;
                    scroll_left += width + 10;
                }
            }
        },
        search_sort: function(item) {
            var that = this;
            for (var i = 0; i < that.sortorders.length; i++) {
                that.sortorders[i].is_active = false;
            }
            item.is_active = true;
            that.current_sortby = item.index;
            if (item.index == 3) {
                if (item.sort_by_price == 1 || item.sort_by_price == 3) {
                    item.sort_by_price = 2;
                    that.current_sortby = 6;
                } else {
                    item.sort_by_price = 3;
                    that.current_sortby = 11;
                }
            } else {
                that.sortorders[2].sort_by_price = 1;
            }
            that.reloadProductItems();
        },
        do_search_top_menu: function(item) {
            var that = this;
            for (var i = 0; i < that.menus.length; i++) {
                that.menus[i].is_active = false;
            }
            item.is_active = true;
            that.categoryid = item.id;
            that.reloadProductItems();
        },
        reset_refresh_box: function() {
            var that = this;
            var main_refresh = $api.byId('main_refresh');
            var top_menus = $api.byId('top_menus');
            var top_menus_h = $api.offset(top_menus).h;
            $api.css(main_refresh, 'margin-top:' + top_menus_h + 'px');
        },
        openProductItems: function(id, isprimary) {
            var that = this;
            var header_h = api.pageParam.header_h;
            var top_menus = $api.byId('top_menus');
            var top_menus_h = $api.offset(top_menus).h;
            api.openFrame({
                name: 'dl_productitems',
                url: './dl_productitems.html',
                rect: {
                    x: 0,
                    y: header_h + top_menus_h,
                    w: 'auto',
                    h: 'auto',
                },
                pageParam: {
                    categoryid: id,
                    sortorder: that.current_sortby,
                    keywords: that.keywords
                }
            });
        },
        reloadProductItems: function() {
            var that = this;
            var frames = api.frames();
            var isProductFrameOpen = false;
            for (var i = 0; i < frames.length; i++) {
                if (frames[i].name == 'dl_productitems') {
                    isProductFrameOpen = true;
                    break;
                }
            }
            that.openProductItems();
            if (isProductFrameOpen) {
                api.sendEvent({
                    name: 'reloadproductlist',
                    extra: {
                        categoryid: that.categoryid,
                        sortorder: that.current_sortby,
                        keywords: that.keywords
                    }
                });
            }
        },
    }
});
apiready = function() {
    api.parseTapmode();
    ns = window.Foresight.Util;
    toast = new auiToast();
    app.categoryid = api.pageParam.id;
    app.keywords = api.pageParam.keywords || ''
    app.get_data();
};
